<template>
  <div class="product">
    <!-- 搜索框 -->
    <div class="search">
      <template>
        <el-select
          v-model="searchValue"
          filterable
          remote
          clearable
          reserve-keyword
          :remote-method="remoteMethod"
          placeholder="请输入姓名,如果不更新,点击右侧搜索按钮"
          @change="searchTextChange"
          @clear="clear"
        >
          <el-option
            v-for="item in searchList"
            :key="item.sId"
            :label="item.name"
            :value="item.name"
          >
            {{ item.name }}
          </el-option>
        </el-select>
      </template>
      <!-- 搜索按钮 -->
      <el-button
        type="primary"
        plain
        icon="el-icon-search"
        @click="searchButtonClick"
      ></el-button>
      <!-- 添加按钮 -->
      <el-button type="primary" @click="addStu" v-has="'add'">添加项目</el-button>
    </div>

    <!-- 班级选择 -->
    <div class="select-class">
      <el-form>
        <el-form-item label="选择班级:">
          <el-select
            v-model="classes"
            filterable
            placeholder="请选择"
            @change="classChange"
            @visible-change="classVisible"
          >
            <el-option
              label="全部"
              value="all"
              v-loading="selLoading"
            ></el-option>

            <el-option
              :label="item"
              :value="item"
              v-for="(item, index) in classesList"
              :key="index"
            >
              {{ item }}
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>

    <!-- 导出excel -->
    <!-- 下载插件 （梅雨溪仓库+》export-excel） -->
    <div class="exportExcel">
      <el-button icon="iconfont icon-excel" @click="exportExcel">
        导出excel数据
      </el-button>
    </div>

    <!-- 表格 -->

    <div class="student-table">
      <el-table :data="stuData" style="width: 100%" v-loading="loading" border>
        <el-table-column label="头像" width="220" align="center">
          <template v-slot="{ row }">
            <el-avatar
              shape="square"
              :size="50"
              fit="fill"
              :src="row.headimgurl"
            ></el-avatar>
          </template>
        </el-table-column>

        <el-table-column prop="name" align="center" width="200" label="姓名">
        </el-table-column>

        <el-table-column prop="degree" align="center" width="200" label="学历">
        </el-table-column>

        <el-table-column prop="class" align="center" width="200" label="班级">
        </el-table-column>

        <el-table-column
          prop="productUrl"
          align="center"
          width="200"
          label="项目"
        >
        </el-table-column>

        <el-table-column
          prop="cTime"
          align="center"
          width="200"
          label="创建时间"
        >
        </el-table-column>

        <el-table-column label="操作" align="center">
          <template v-slot="{ row }">
            <el-button 
              size="mini" 
              type="primary" 
              icon="iconfont el-icon-view"
              v-has="'read'"
              @click="lookStu(row)"
              >查看</el-button
            >
            <el-button
              size="mini"
              type="primary"
              icon="iconfont el-icon-edit"
              @click="editStu(row)"
              v-has="'edit'"
              >编辑</el-button
            >
            <el-button
              size="mini"
              type="danger"
              icon="iconfont el-icon-delete"
              @click="delStu(row)"
              v-has="'delete'"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页器 -->
    <div class="pagination">
      <el-pagination
        hide-on-single-page
        background
        layout="prev, pager, next"
        @current-change="changePage"
        :page-size="stuPageSize"
        :total="stuTotal"
        :current-page.sync="currentPage"
      >
      </el-pagination>
    </div>

    <!-- dialog弹出框 -->
    <Dialog></Dialog>
  </div>
</template>
<script>
import dialog from "@/components/stuDialog";
import * as stuApi from "@/api/studentManager";
import { mapState, mapActions, mapMutations } from "vuex";
//引入导出Excel的插件
import qee from "qf-export-excel";
export default {
  components: {
    Dialog: dialog,
  },
  computed: {
    ...mapState(["stuData", "loading", "stuTotal", "stuPageSize"]),
  },
  meta: {
    title: "xyxmgl",
    icon: "iconfont icon-shangpinguanli",
  },

  data() {
    return {
      searchValue: "",
      searchList: [],
      classes: "", //select绑定的班级
      classesList: [], //班级列表
      selLoading: true,
      currentPage: 1,
    };
  },
  async created() {
    this.GET_STU_LIST();
  },
  methods: {
    //导出excel表格的方法
    exportExcel() {
      let titleList = [
        {
          title: "头像地址",
          key: "headimgurl",
        },
        {
          title: "姓名",
          key: "name",
        },
        {
          title: "学历",
          key: "degree",
        },
        {
          title: "班级",
          key: "class",
        },
        {
          title: "项目地址",
          key: "productUrl",
        },
        {
          title: "创建时间",
          key: "cTime",
        },
      ];
      qee(titleList, this.stuData, "2201班级信息");
    },
    //清除搜索框，取消搜索
    clear() {
      this.currentPage = 1;
    },
    //点击搜索按钮触发的方法
    searchButtonClick() {
      this.currentPage = 1;
      //console.log(this.searchValue);
      stuApi.searchStu(null, this.searchValue, null).then((res) => {
        //console.log(res);
        this.SET_STU_DATA(res.data);
      });
    },
    //搜索框输入值发生变化的时候调用的方法，参数为当前输入值
    remoteMethod(query) {
      this.searchValue = query;
      //console.log(query);
      //向后台发起请求
      stuApi.searchStu("", query, "").then((res) => {
        //console.log(res);
        //数组去重
        let norepeat = [];
        for (let i = 0; i < res.data.data.length; i++) {
          let flag = true;
          for (let k = 0; k < norepeat.length; k++) {
            if (norepeat[k].name === res.data.data[i].name) {
              flag = false;
              break;
            }
          }
          if (flag) {
            norepeat.push(res.data.data[i]);
          }
        }
        //console.log(norepeat);
        this.searchList = norepeat;
      });
    },

    //搜索框中选中值发生变化的时候触发的方法
    searchTextChange(searchText) {
      //console.log(searchText);
      //发送请求更新列表
      stuApi.searchStu("", searchText, "").then((res) => {
        //console.log(res.data);
        this.currentPage = 1;
        this.SET_STU_DATA(res.data); //vuex中表格数据更新的方法
      });
    },

    //分页器页码发生变化的时候触发的方法
    changePage(page) {
      //判断搜索框是否有值，如果有的话，需要展示搜索分页
      if (this.searchValue) {
        stuApi.searchStu(page, this.searchValue, "").then((res) => {
          this.SET_STU_DATA(res.data);
        });
      } else {
        //页码发生变化重新获取数据
        this.GET_STU_LIST({ page });
      }
    },
    //选择班级中，选中值发生变化时触发的方法
    classChange(query) {
      console.log(query);
      //当query为”all“的时候，显示全部班级
      // if(query==="all"){
      //   this.GET_STU_LIST()
      // }else{
      //   this.GET_STU_LIST({classes: query})
      // }

      if (query === "all") {
        query = ""; //将query赋值为空，后台会返回所有班级数据
      }
      this.GET_STU_LIST({ classes: query });
    },
    //选择班级中，下拉框出现/隐藏时触发
    classVisible(isVisible) {
      //打开下拉框加载动画
      this.selLoading = true;
      //console.log(isVisible);
      //展开的时候需要获取数据
      //调用获取班级列表的方法
      if (isVisible) {
        stuApi.getClassList().then((res) => {
          //console.log(res);
          if (res.data.state) {
            this.classesList = res.data.data;
            //关闭下拉框加载动画
            this.selLoading = false;
          } else {
            this.$message.error("获取班级列表失败");
          }
        });
      }
    },
    //获取学员项目管理表格数据
    ...mapActions(["GET_STU_LIST"]),

    ...mapMutations([
      "SHOW_DIALOG",
      "HIDE_DIALOG",
      "CHANGE_DIALOG_TITLE",
      "SET_CURRENT_ROW",
      "SET_STU_DATA",
      "SET_SINGLE_DATA"
    ]),
    //增加学员
    addStu() {
      //更改dialogTitle
      this.CHANGE_DIALOG_TITLE("增加学员信息");
      //弹出dialog
      this.SHOW_DIALOG();
    },
    //查看学员
    lookStu(row){
      this.SET_CURRENT_ROW(row)
      this.$router.push({path: "/studentmanager/studentprofill"})
    },
    //编辑学员
    editStu(row) {
      //更改dialogTitle
      this.CHANGE_DIALOG_TITLE("编辑学员信息");
      //弹出dialog
      this.SHOW_DIALOG();
      //console.log(row);
      //将当前这行的数据回显到dialog弹出框中，通过vuex修改currentRow的值
      this.SET_CURRENT_ROW(row);
    },
    //删除学员
    delStu(row) {
      //console.log(row);
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          stuApi.delStuInfo(row.sId).then((res) => {
            //console.log(res);
            if (res.data.state) {
              //删除成功
              //更新列表
              this.GET_STU_LIST();
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            } else {
              //删除失败，这条数据被别人删除了
              this.$message.error("删除失败，数据不存在");
            }
          });
        })

        //点击取消
        .catch(() => {
          this.$message({
            type: "warning",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style lang="less" scoped>
.search {
  text-align: left;
}
.select-class {
  .el-form-item {
    text-align: left;
  }
}
.exportExcel {
  text-align: right;
  /deep/ .icon-excel:before {
    color: green;
  }
}
</style>